<template>
  <view class="mine-container">
    <!-- 顶部用户信息区域 -->
    <view class="user-header">
      <view class="header-background">
        <view class="gradient-overlay"></view>
      </view>
      
      <view class="user-info-section">
        <view class="avatar-section" @click="handleToAvatar">
          <view v-if="!avatar" class="avatar-placeholder">
            <uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
          </view>
          <image v-if="avatar" :src="avatar" class="user-avatar" mode="aspectFill"></image>
          <view class="avatar-edit-badge">
            <uni-icons type="camera" size="12" color="#ffffff"></uni-icons>
          </view>
        </view>
        
        <view class="user-details" @click="handleToInfo">
          <view v-if="!name" class="login-prompt" @click="handleToLogin">
            <text class="login-text">点击登录</text>
            <uni-icons type="right" size="16" color="#ffffff"></uni-icons>
          </view>
          <view v-if="name" class="user-profile">
            <text class="user-name">{{ name }}</text>
            <text class="user-role">系统管理员</text>
            <view class="profile-link">
              <text class="link-text">查看个人资料</text>
              <uni-icons type="right" size="14" color="#ffffff"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 快捷功能卡片 -->
      <view class="quick-actions-card">
        <view class="card-header">
          <text class="card-title">快捷功能</text>
        </view>
        <view class="actions-grid">
          <view class="action-item" @click="handleJiaoLiuQun">
            <view class="action-icon qq-icon">
              <uni-icons type="chat-filled" size="20" color="#ffffff"></uni-icons>
            </view>
            <text class="action-name">交流群</text>
          </view>
          <view class="action-item" @click="handleBuilding">
            <view class="action-icon service-icon">
              <uni-icons type="headphones" size="20" color="#ffffff"></uni-icons>
            </view>
            <text class="action-name">在线客服</text>
          </view>
          <view class="action-item" @click="handleBuilding">
            <view class="action-icon feedback-icon">
              <uni-icons type="chatboxes" size="20" color="#ffffff"></uni-icons>
            </view>
            <text class="action-name">反馈社区</text>
          </view>
          <view class="action-item" @click="handleBuilding">
            <view class="action-icon like-icon">
              <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
            </view>
            <text class="action-name">点赞我们</text>
          </view>
        </view>
      </view>

      <!-- 功能菜单列表 -->
      <view class="menu-section">
        <view class="menu-card">
          <view class="menu-item" @click="handleToEditInfo">
            <view class="menu-item-left">
              <view class="menu-icon-wrapper edit-icon">
                <uni-icons type="person" size="18" color="#ffffff"></uni-icons>
              </view>
              <view class="menu-content">
                <text class="menu-title">编辑资料</text>
                <text class="menu-desc">修改个人信息和头像</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#d9d9d9"></uni-icons>
          </view>

          <view class="menu-item" @click="handleToSetting">
            <view class="menu-item-left">
              <view class="menu-icon-wrapper setting-icon">
                <uni-icons type="gear" size="18" color="#ffffff"></uni-icons>
              </view>
              <view class="menu-content">
                <text class="menu-title">应用设置</text>
                <text class="menu-desc">系统设置和偏好配置</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#d9d9d9"></uni-icons>
          </view>

          <view class="menu-item" @click="handleHelp">
            <view class="menu-item-left">
              <view class="menu-icon-wrapper help-icon">
                <uni-icons type="help" size="18" color="#ffffff"></uni-icons>
              </view>
              <view class="menu-content">
                <text class="menu-title">常见问题</text>
                <text class="menu-desc">使用帮助和问题解答</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#d9d9d9"></uni-icons>
          </view>

          <view class="menu-item" @click="handleAbout">
            <view class="menu-item-left">
              <view class="menu-icon-wrapper about-icon">
                <uni-icons type="info" size="18" color="#ffffff"></uni-icons>
              </view>
              <view class="menu-content">
                <text class="menu-title">关于我们</text>
                <text class="menu-desc">系统版本和团队信息</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#d9d9d9"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 系统信息 -->
      <view class="system-info">
        <text class="version-text">若依管理系统 v4.7.8</text>
        <text class="copyright-text">Copyright © 2024 RuoYi All rights reserved.</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store'
import { computed, getCurrentInstance } from "vue"

const { proxy } = getCurrentInstance()
const name = useUserStore().name
const avatar = computed(() => useUserStore().avatar)

function handleToInfo() {
  proxy.$tab.navigateTo('/pages/mine/info/index')
}

function handleToEditInfo() {
  proxy.$tab.navigateTo('/pages/mine/info/edit')
}

function handleToSetting() {
  proxy.$tab.navigateTo('/pages/mine/setting/index')
}

function handleToLogin() {
  proxy.$tab.reLaunch('/pages/login')
}

function handleToAvatar() {
  proxy.$tab.navigateTo('/pages/mine/avatar/index')
}
    
function handleHelp() {
  proxy.$tab.navigateTo('/pages/mine/help/index')
}
    
function handleAbout() {
  proxy.$tab.navigateTo('/pages/mine/about/index')
}
    
function handleJiaoLiuQun() {
  proxy.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
}
    
function handleBuilding() {
  proxy.$modal.showToast('模块建设中~')
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

page {
  background-color: $gray-50;
}

.mine-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: env(safe-area-inset-bottom);
}

// 顶部用户信息区域
.user-header {
  position: relative;
  padding: 60px $space-lg 40px $space-lg;
  
  .header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .gradient-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    }
  }
  
  .user-info-section {
    position: relative;
    z-index: 1;
    @include flex-start;
    gap: $space-lg;
    
    .avatar-section {
      position: relative;
      
      .avatar-placeholder {
        width: 80px;
        height: 80px;
        border-radius: $radius-full;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 3px solid rgba(255, 255, 255, 0.3);
        @include flex-center;
      }
      
      .user-avatar {
        width: 80px;
        height: 80px;
        border-radius: $radius-full;
        border: 3px solid rgba(255, 255, 255, 0.3);
        box-shadow: $shadow-lg;
      }
      
      .avatar-edit-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: $primary;
        border-radius: $radius-full;
        border: 2px solid $white;
        @include flex-center;
        box-shadow: $shadow-sm;
      }
    }
    
    .user-details {
      flex: 1;
      
      .login-prompt {
        @include flex-start;
        gap: $space-xs;
        padding: $space-md;
        background: rgba(255, 255, 255, 0.1);
        border-radius: $radius-lg;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        
        .login-text {
          font-size: $text-lg;
          font-weight: $font-medium;
          color: $white;
        }
      }
      
      .user-profile {
        .user-name {
          font-size: $text-xl;
          font-weight: $font-bold;
          color: $white;
          display: block;
          margin-bottom: $space-xs;
        }
        
        .user-role {
          font-size: $text-sm;
          color: rgba(255, 255, 255, 0.8);
          display: block;
          margin-bottom: $space-sm;
        }
        
        .profile-link {
          @include flex-start;
          gap: $space-xs;
          padding: $space-xs $space-sm;
          background: rgba(255, 255, 255, 0.1);
          border-radius: $radius-md;
          backdrop-filter: blur(10px);
          
          .link-text {
            font-size: $text-sm;
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
    }
  }
}

// 主要内容区域
.main-content {
  position: relative;
  margin-top: -20px;
  padding: 0 $space-lg;
  
  // 快捷功能卡片
  .quick-actions-card {
    background: $white;
    border-radius: $radius-xl;
    padding: $space-lg;
    margin-bottom: $space-lg;
    box-shadow: $shadow-lg;
    
    .card-header {
      margin-bottom: $space-lg;
      
      .card-title {
        font-size: $text-lg;
        font-weight: $font-bold;
        color: $gray-900;
      }
    }
    
    .actions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: $space-md;
      
      .action-item {
        @include flex-center;
        flex-direction: column;
        gap: $space-sm;
        padding: $space-md;
        border-radius: $radius-lg;
        transition: $transition-base;
        
        &:active {
          transform: scale(0.95);
        }
        
        .action-icon {
          width: 48px;
          height: 48px;
          border-radius: $radius-lg;
          @include flex-center;
          box-shadow: $shadow-sm;
          
          &.qq-icon {
            background: linear-gradient(135deg, #12c2e9, #c471ed);
          }
          
          &.service-icon {
            background: linear-gradient(135deg, #667eea, #764ba2);
          }
          
          &.feedback-icon {
            background: linear-gradient(135deg, #f093fb, #f5576c);
          }
          
          &.like-icon {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
          }
        }
        
        .action-name {
          font-size: $text-sm;
          font-weight: $font-medium;
          color: $gray-700;
          text-align: center;
        }
      }
    }
  }
  
  // 功能菜单列表
  .menu-section {
    .menu-card {
      background: $white;
      border-radius: $radius-xl;
      overflow: hidden;
      box-shadow: $shadow-lg;
      margin-bottom: $space-lg;
      
      .menu-item {
        @include flex-between;
        padding: $space-lg;
        border-bottom: 1px solid $border-color;
        transition: $transition-base;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background: $gray-50;
        }
        
        .menu-item-left {
          @include flex-start;
          gap: $space-md;
          flex: 1;
          
          .menu-icon-wrapper {
            width: 40px;
            height: 40px;
            border-radius: $radius-lg;
            @include flex-center;
            
            &.edit-icon {
              background: linear-gradient(135deg, #667eea, #764ba2);
            }
            
            &.setting-icon {
              background: linear-gradient(135deg, #f093fb, #f5576c);
            }
            
            &.help-icon {
              background: linear-gradient(135deg, #4facfe, #00f2fe);
            }
            
            &.about-icon {
              background: linear-gradient(135deg, #43e97b, #38f9d7);
            }
          }
          
          .menu-content {
            flex: 1;
            
            .menu-title {
              font-size: $text-base;
              font-weight: $font-medium;
              color: $gray-800;
              display: block;
              margin-bottom: 2px;
            }
            
            .menu-desc {
              font-size: $text-sm;
              color: $gray-500;
            }
          }
        }
      }
    }
  }
  
  // 系统信息
  .system-info {
    text-align: center;
    padding: $space-xl 0;
    
    .version-text {
      font-size: $text-sm;
      color: rgba(255, 255, 255, 0.8);
      display: block;
      margin-bottom: $space-xs;
    }
    
    .copyright-text {
      font-size: $text-xs;
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
